﻿@page "/chart/multiple-axis"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates the multiple axis in the chart to represent the temperature in celsius in an axis and fahrenheit in another axis.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure multiple axes. Use axes collection to render secondary axis to the chart and bind it to the specified series. You can also customize the axis line and its labels similar to primary axis.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the multiple axes can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/axis-customization/#multiple-axis'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Weather condition JPN vs DEU" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
            <ChartAxisMinorGridLines Width="0"></ChartAxisMinorGridLines>
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Minimum="0" Maximum="100" Interval="20" LabelFormat="{value}°F">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
        </ChartPrimaryYAxis>
        <ChartAxes>
            <ChartAxis Minimum="24" Maximum="36" Interval="2" OpposedPosition="true" RowIndex="0" Name="yAxis2" LabelFormat="{value}°C">
                <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
                <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            </ChartAxis>
        </ChartAxes>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" XName="Day" YName="DEU_Temp" Opacity="1" Name="Germany" Width="2" Type="ChartSeriesType.Column">
                <ChartMarker Visible="true" Height="10" Width="10">
                </ChartMarker>
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" YAxisName="yAxis2" XName="Day" YName="JPN_Temp" Opacity="1" Name="Japan" Width="2" Type="ChartSeriesType.Line">
                <ChartMarker Visible="true" Height="10" Width="10">
                    <ChartMarkerBorder Color="#F8AB1D" Width="2"></ChartMarkerBorder>
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartAnnotations>
            <ChartAnnotation X="SUN" Y="70" CoordinateUnits="Syncfusion.Blazor.Charts.Units.Point">
                <ContentTemplate>
                    <div><img src="images/chart/cloud.png" style="width: 41px; height: 41px" /></div>
                </ContentTemplate>
            </ChartAnnotation>
            <ChartAnnotation YAxisName="yAxis2" X="SAT" Y="35" CoordinateUnits="Syncfusion.Blazor.Charts.Units.Point">
                <ContentTemplate>
                    <div><img src="images/chart/sunny.png" style="width: 41px; height: 41px" /></div>
                </ContentTemplate>
            </ChartAnnotation>
        </ChartAnnotations>
        <ChartLegendSettings Visible="false"></ChartLegendSettings>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    private string SUN = "SUN", SAT = "SAT";
    public List<CategoryData> ChartPoints { get; set; } = new List<CategoryData>
    {
        new CategoryData { Day = "SUN", DEU_Temp = 35, JPN_Temp = 31 },
        new CategoryData { Day = "MON", DEU_Temp = 40, JPN_Temp = 28 },
        new CategoryData { Day = "TUE", DEU_Temp = 50, JPN_Temp = 29 },
        new CategoryData { Day = "WED", DEU_Temp = 70, JPN_Temp = 30 },
        new CategoryData { Day = "THU", DEU_Temp = 65, JPN_Temp = 33 },
        new CategoryData { Day = "FRI", DEU_Temp = 55, JPN_Temp = 32},
        new CategoryData { Day = "SAT", DEU_Temp = 50, JPN_Temp = 34 },
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class CategoryData
    {
        public string Day { get; set; }
        public double JPN_Temp { get; set; }
        public double DEU_Temp { get; set; }
    }
}
